<template>
	<view>
		<view class="top">
			<span @click="goback"><</span>
		</view>
		<view class="content">
			<view class="box">
				<h1 v-if="flag">登录</h1>
				<h1 v-if="!flag">注册</h1>
					<u--input
						v-model="data.username"
					    class='inp'
					    placeholder="请输入用户名"
					    prefixIcon="account"
					    prefixIconStyle="font-size: 22px;color: #909399"
					></u--input>
					<u--input
						v-model="data.password"
					    class='inp1'
					    placeholder="请输入密码"
					    prefixIcon="lock"
					    prefixIconStyle="font-size: 22px;color: #909399"
					></u--input>
					<u--input
						v-model="data.repassword"
						v-if="!flag"
					    class='inp2'
					    placeholder="请输入确认密码"
					    prefixIcon="lock"
					    prefixIconStyle="font-size: 22px;color: #909399"
					></u--input>
					<view class="btn">
						<u-button type="success" v-if="flag" @click="denglu">登录</u-button>
						<u-button type="success" v-if="!flag" @click="reg">注册</u-button>
					</view>
					<view class="pan">
						<span v-if="flag" @click="zhuce">注册账号</span>
						<span v-if="!flag" @click="login">去登录</span>
						<span>忘记密码?</span>
					</view>
			</view>
		</view>
		<view class="bot">
			<u-icon name="weixin-fill" class="icon" size="40" color="#5ccc84" v-if="flag"></u-icon>
		</view>
		<p>
			<checkbox-group class="check" v-if="flag">
				<label>
					<checkbox checked="true"  >已阅读并同意用户协议&隐私协议</checkbox>
				</label>
			</checkbox-group>
		</p>
	</view>
</template>

<script>
	import {getLogin,getReg} from "../../api/login.js"
	export default {
		data() {
			return {
				flag:true,
				data:{
					username:'',
					password:'',
					repassword:''
				}
			}
		},
		methods: {
			//登录
			denglu(){
				getLogin(this.data).then(res=>{
					console.log(res);
					if(res.msg=='fail'){
						uni.showToast({
							title:res.data,
							icon:"none"
						})
					}
					if(res.code==20000){
						uni.showToast({
							title:'登录成功'
						})
						uni.switchTab({
							url:'/pages/my/my'
						})
					uni.setStorageSync('token',res.data.token)
					uni.setStorageSync('username',res.data.username)	
					}
				})
			},
			//注册
			reg(){
				getReg(this.data).then(res=>{
					console.log(res);
					uni.showToast({
						title:res.data
					})
					if(res.code){
						this.flag=true
					}
				})
			},
			//返回
			goback(){
				uni.switchTab({
					url:"/pages/my/my"
				})
			},
			//点击注册
			zhuce(){
				this.flag=false
			},
			//点击登录
			login(){
				this.flag=true
			},
			
		}
	}
</script>

<style lang="scss">
	.top{
		width: 100%;
		height: 220rpx;
		background-image: linear-gradient(120deg,#3bfdaf,#70d6f2);
		span{
			color: #fff;
			font-size: 60rpx;
			margin-left: 30rpx;
		}
	}
	.content{
		position: absolute;
		top: 200rpx;
		left: 0;
		right: 0;
		background-color: #fff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 60rpx 70rpx 0 70rpx;
		.box{
			h1{
				font-weight: normal;
			}
			.inp{
				background-color: #f5f5f3;
				margin-top: 30rpx;
			}
			.inp1{
				background-color: #f5f5f3;
				margin-top: 30rpx;
			}
			.inp2{
				background-color: #f5f5f3;
				margin-top: 30rpx;
			}
			.btn{
				margin-top: 30rpx;
			}
			.pan{
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
				:nth-child(1){
					color: #5ccc84;
				}
				
				:nth-child(3){
					color: #f5f5f3;
				}
			}
		}
		
	}
	.bot{
		
		.icon{
			bottom:300rpx;
			position: absolute;
			border:2rpx solid #5ccc84;
			margin-left: 45%;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
	}
	.check{
		// margin-left: 30%;
		bottom:200rpx;
		left:120rpx;
		position: absolute;
	}
	
</style>
